<template>
    <el-drawer v-model="visible" :with-header="false" :size="1000" destroy-on-close @closed="$emit('closed')">
        <el-container v-loading="loading">
            <el-main style="padding:20px 20px 20px 20px" class="">
                <el-container class="is-vertical">
                    <sc-title title="学员详情"></sc-title>
                    <div>
                        <el-tabs v-model="activeName" @tab-click="tabClickFun">
                            <el-tab-pane label="基本信息" name="first">
                                <el-form ref="form" label-width="120px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <el-row>
                                            <el-col :span="24">
												<el-row>
													<el-col :span="12">
                                                        <el-form-item label="用户头像:">
															<img style="width: 60px; height: 60px" :src="user.portrait.url" v-if="user.portrait">
														</el-form-item>
                                                    </el-col>
												</el-row>
                                                <el-row>
                                                    <el-col :span="12">
                                                        <el-form-item label="用户姓名:">{{user.name}}</el-form-item>
                                                        <el-form-item label="用户账号:">{{user.authAccount && user.authAccount.account || ''}}</el-form-item>
                                                        <el-form-item label="用户生日:">{{user.birthday}}</el-form-item>
                                                        <el-form-item label="用户学校:">{{user.school}}</el-form-item>
                                                        <el-form-item label="用户状态:">
															<el-tag size="mini" v-if="user.status && user.status.value == 0" type="danger">禁用</el-tag>
                                                            <el-tag size="mini" v-if="user.status && user.status.value == 1" type="success">启用</el-tag>
														</el-form-item>
                                                        <el-form-item label="父亲职业:">{{user.fatherWork}}</el-form-item>
                                                        <el-form-item label="母亲职业:">{{user.motherWork}}</el-form-item>
                                                        <el-form-item label="家庭住址:">{{user.address}}</el-form-item>
                                                        <el-form-item label="数学成绩:">{{user.mathScore}}</el-form-item>
                                                        <el-form-item label="班级排名:">{{user.classRank}}</el-form-item>
                                                        <el-form-item label="补习情况:">{{user.extraStudy && user.extraStudy.name}}</el-form-item>
                                                        <el-form-item label="生源信息:">{{user.source && user.source.name}}</el-form-item>
                                                        <el-form-item label="推荐码:">{{user.recommendCode}}</el-form-item>
                                                        <el-form-item label="首测词汇量:">{{user.vocabulary}}</el-form-item>
                                                        <el-form-item label="记住词汇:">{{user.rememberWords}}</el-form-item>
                                                    </el-col>
                                                    <el-col :span="12">
                                                        <el-form-item label="所属机构:">{{user?.agent?.name}}</el-form-item>
                                                        <el-form-item label="用户性别:">{{user.gender && user.gender.name}}</el-form-item>
                                                        <el-form-item label="手机号码:">{{user.mobile}}</el-form-item>
                                                        <el-form-item label="用户年级:">{{user.grade ? user.grade.name : ''}}</el-form-item>
                                                        <el-form-item label="体检教练:">{{user?.trialTeacher?.name}}</el-form-item>
                                                        <el-form-item label="体检日期:">{{user.trialDate}}</el-form-item>
                                                        <el-form-item label="体验时长:">{{user.trialDuration}}</el-form-item>
                                                        <el-form-item label="语文成绩:">{{user.chineseScore}}</el-form-item>
                                                        <el-form-item label="英语成绩:">{{user.englishScore}}</el-form-item>
                                                        <el-form-item label="年级排名:">{{user.gradeRank}}</el-form-item>
                                                        <el-form-item label="学习兴趣:">{{user.learningInterest && user.learningInterest.name}}</el-form-item>
                                                        <el-form-item label="推荐人:">{{user.recommender || '无'}}</el-form-item>
                                                        <el-form-item label="正确率:">{{user.accuracyRate}}%</el-form-item>
                                                        <el-form-item label="英语水平:">{{user.englishLevel}}</el-form-item>
                                                        <el-form-item label="创建时间:">{{user.createdAt}}</el-form-item>
                                                    </el-col>
                                                </el-row>
                                                <el-row>
                                                    <el-col :span="24">
                                                        <el-form-item label="备注:">{{user.remark}}</el-form-item>
                                                    </el-col>
                                                </el-row>
												
                                            </el-col>
                                        </el-row>
                                    </div>
									
                                </el-form>
                            </el-tab-pane>
                           
                            <el-tab-pane label="开通课程" name="second">
                                <el-form ref="form" label-width="110px" class="formshows" label-position="right" size="small">
                                    <div class="info">
                                        <div class="tcontainer">
                                            <div class="title" style="padding-bottom: 0px;"></div>
                                            <el-button 
                                                type="primary" size="small" @click="table_course">课程开通
                                            </el-button>
                                        </div>
                                        <el-row>
                                            <el-main class="nopadding">
                                                <el-table ref="userCourseTable" :data="userCourses || []" style="width: 100%">
                                                    <el-table-column prop="courseName" label="课程名称" align="left">
                                                        <template #default="scope">
                                                            {{ scope.row.course ? scope.row.course.name : '' }}
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="状态" align="center" width="120">
                                                        <template #default="scope">
                                                            <el-tag size="mini" v-if="scope.row.status.value == 0" type="danger">{{scope.row.status.name}}</el-tag>
                                                            <el-tag size="mini" v-if="scope.row.status.value == 1" type="success">{{scope.row.status.name}}</el-tag>
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="开通时间" align="center" width="150">
                                                        <template #default="scope">
                                                            {{ scope.row.createdAt }}
                                                        </template>
                                                    </el-table-column>
                                                    <el-table-column label="操作" fixed="right" align="center" width="150">
                                                        <template #default="scope">
                                                            <template v-if="scope.row.status.value == 1">
                                                                <el-popconfirm :title="'确认是否要关闭课程：' + scope.row.course.name + '?'" @confirm="course_close(scope.row)" >
                                                                    <template #reference>
                                                                        <el-button type="text" size="small">关闭</el-button>
                                                                    </template>
                                                                </el-popconfirm>
                                                            </template>
                                                            <template v-if="scope.row.status.value == 0">
                                                                <el-popconfirm :title="'确认是否要开通课程：' + scope.row.course.name + '?'" @confirm="course_open(scope.row)" >
                                                                    <template #reference>
                                                                        <el-button type="text" size="small">开通</el-button>
                                                                    </template>
                                                                </el-popconfirm>
                                                            </template>
                                                        </template>
                                                    </el-table-column>
                                                </el-table>
                                            </el-main>
                                        </el-row>
                                    </div>
                                </el-form>
                            </el-tab-pane>

                            <el-tab-pane label="上课记录" name="third" >
                                <user-learn-table :user="user"  v-if="activeName == 'third'" ></user-learn-table>
                            </el-tab-pane>
                           
                        </el-tabs>
                    </div>
                </el-container>
            </el-main>
            <el-footer>
                <el-button @click="visible=false">关闭</el-button>
            </el-footer>
        </el-container>
    </el-drawer>

    <set-course-dialog v-if="dialog.openCourse" ref="setCourseDialog" @success="handleCourseSuccess"></set-course-dialog>
</template>

<script>
import setCourseDialog from './components/setCourse.vue'
import userLearnTable from '../learn/components/learnTable.vue'
export default {
    components: {
        setCourseDialog,
        userLearnTable
    },
    data() {
        return {
            visible: false,
            loading: false,
            dialog: {
               openCourse: false
            },
            user: {},
            userId: null,
            activeName: 'first',
            userCourses: []
        }
    },
    mounted() {
     
    },
    methods: {
        open(id, activeName) {
            this.activeName = activeName || 'first'
            this.visible = true
            this.userId = id
            this.getData(id)
        },
        async getData(id) {
            this.loading = true
            await this.$API.user.action.get({id: id}).then((res) => {
                this.user = res.data
                this.loading = false
            }, () => {
                this.loading = false
            })
        },
        //批量开通课程
        table_course() {
            this.dialog.openCourse = true
            this.$nextTick(() => {
                this.$refs.setCourseDialog.open(this.user)
            })
        },
        //关闭课程
        course_close(row) {
            this.$API.user.course.updateStatus.put({ id: row.id, status: 0 }).then(() => {
                this.getUserCourse()
                this.$notify.success("关闭成功")
            });
        },
        //开启课程
        course_open(row) {
            this.$API.user.course.updateStatus.put({ id: row.id, status: 1 }).then(() => {
                this.getUserCourse()
                this.$notify.success("开启成功")
            });
        },
        tabClickFun() {
           if (this.activeName === 'second') {
               this.getUserCourse()
           }
        },
        getUserCourse() {
            this.$API.user.course.all.get({userId: this.userId}).then((res) => {
                this.userCourses = res.data
            }, () => {
            })
        },
        handleSuccess() {
            this.getData(this.user.id)
        },
        handleCourseSuccess() {
            this.getUserCourse()
        },
    }
}
</script>

<style scoped>
.tcontainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
}
.title {
    font-size: 14px;
    padding-left: 6px;
    font-weight: 500;
    padding-bottom: 20px;
}
.info {
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.info:last-child {
    border: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
[data-theme="dark"] .info {
    border-color: #434343;
}
:deep(.el-form-item__content) {
    font-size: 12px !important;
}
:deep(.el-image-viewer__close) {
    background-color: unset;
}
.el-form-item__label {
    text-align: justify;
}
</style>
